<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>症状自查小程序 - 患者端</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
    <script src="ai-model-integration.js"></script>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-content">
            <a href="index.html" class="logo">
                <i class="fas fa-heartbeat"></i> 症状自查小程序
            </a>
            <ul class="nav-links">
                <li><a href="index.html" class="active"><i class="fas fa-home"></i> 首页</a></li>
                <li><a href="#"><i class="fas fa-user-md"></i> 在线问诊</a></li>
                <li><a href="#"><i class="fas fa-history"></i> 诊断历史</a></li>
                <li><a href="#"><i class="fas fa-cog"></i> 设置</a></li>
            </ul>
        </div>
    </nav>

    <!-- 主内容区域 -->
    <div class="container">
        <div class="main-content">
            <h1 class="page-title">AI智能诊断</h1>
            <p class="page-subtitle">描述您的症状，AI将为您提供初步诊断建议</p>
            
            <!-- AI智能诊断区域 -->
            <div class="ai-diagnosis-container">
                <!-- 症状输入区域 -->
                <div class="ai-input-section">
                    <h3><i class="fas fa-stethoscope"></i> 症状描述</h3>
                    <textarea 
                        id="symptom-description" 
                        class="symptom-input" 
                        placeholder="请详细描述您的症状，包括：\n• 症状出现的部位\n• 症状的性质（疼痛、发热、咳嗽等）\n• 症状持续的时间\n• 症状的严重程度\n• 是否有其他伴随症状"
                    ></textarea>
                    
                    <!-- 快速症状选择 -->
                    <div class="quick-symptoms">
                        <button class="symptom-btn" onclick="addSymptomToDescription('头痛')">头痛</button>
                        <button class="symptom-btn" onclick="addSymptomToDescription('发热')">发热</button>
                        <button class="symptom-btn" onclick="addSymptomToDescription('咳嗽')">咳嗽</button>
                        <button class="symptom-btn" onclick="addSymptomToDescription('乏力')">乏力</button>
                        <button class="symptom-btn" onclick="addSymptomToDescription('恶心')">恶心</button>
                        <button class="symptom-btn" onclick="addSymptomToDescription('腹泻')">腹泻</button>
                        <button class="symptom-btn" onclick="addSymptomToDescription('胸闷')">胸闷</button>
                        <button class="symptom-btn" onclick="addSymptomToDescription('头晕')">头晕</button>
                    </div>
                    
                    <!-- AI诊断操作 -->
                    <div class="ai-actions">
                        <button class="btn btn-primary" onclick="submitAIDiagnosis()">
                            <i class="fas fa-robot"></i> AI智能诊断
                        </button>
                        <button class="btn btn-secondary" onclick="clearAIDescription()">
                            <i class="fas fa-trash"></i> 清空内容
                        </button>
                    </div>
                </div>
                
                <!-- 诊断结果展示区域 -->
                <div id="diagnosis-result" class="diagnosis-result">
                    <div class="diagnosis-summary">
                        <i class="fas fa-clipboard-check"></i> 诊断结果
                    </div>
                    
                    <!-- 严重程度标签 -->
                    <div class="severity-tags">
                        <span id="severity-tag" class="severity-tag">待评估</span>
                        <span id="urgency-tag" class="severity-tag">待评估</span>
                    </div>
                    
                    <!-- 可能病症 -->
                    <div class="possible-conditions">
                        <h4><i class="fas fa-list"></i> 可能病症</h4>
                        <div id="possible-conditions">
                            <!-- 动态生成的可能病症列表 -->
                        </div>
                    </div>
                    
                    <!-- 建议 -->
                    <div class="recommendations">
                        <h4><i class="fas fa-lightbulb"></i> 建议</h4>
                        <div id="recommendations">
                            <!-- 动态生成的建议列表 -->
                        </div>
                    </div>
                    
                    <!-- 通用建议 -->
                    <div class="general-advice">
                        <h5><i class="fas fa-info-circle"></i> 通用建议</h5>
                        <p id="general-advice">请根据症状严重程度及时就医，本诊断结果仅供参考。</p>
                    </div>
                    
                    <!-- AI模型信息 -->
                    <div id="model-info" class="model-info" style="display: none;">
                        <!-- 动态显示使用的AI模型信息 -->
                    </div>
                    
                    <!-- 免责声明 -->
                    <div class="disclaimer">
                        <p>免责声明：本AI诊断结果仅供参考，不能替代专业医生的诊断。如有紧急情况，请立即就医。</p>
                    </div>
                </div>
                
                <!-- 加载状态 -->
                <div id="loading" class="loading" style="display: none;">
                    <div class="spinner"></div>
                    <p>AI正在分析您的症状，请稍候...</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部导航 -->
    <div class="bottom-nav">
        <button class="nav-btn active">
            <i class="fas fa-home"></i>
            <span>首页</span>
        </button>
        <button class="nav-btn">
            <i class="fas fa-stethoscope"></i>
            <span>诊断</span>
        </button>
        <button class="nav-btn">
            <i class="fas fa-history"></i>
            <span>历史</span>
        </button>
        <button class="nav-btn">
            <i class="fas fa-user"></i>
            <span>我的</span>
        </button>
    </div>

    <script src="app.js"></script>
</body>
</html>